<template>
 
  <div class="login">
<div style="position: fixed">
<my-cat style="z-index: -1;"></my-cat></div>

      
        <div class="btn">
          
          <van-icon name="arrow-down" size="38" @click="off" />
        </div>
      
        
    <h1>欢迎登录</h1>
   <form action="" method="post" class="form"  id="login">
   
    <fieldset>
        <legend>用户登录</legend>
        <label for="name">姓名</label>
        <div>
           <input id="name" name="name"  type="text" placeholder="手机号码" v-model="phone" />
        </div>
        <label for="password">密码</label>
        <div>
            <input name="password" type="text" id="password"  v-model="captcha" value="">
        </div>
         <div class="title" @click='goto'> </div>
        <div class="button_div">
       我同意  <input type="checkbox"> <br><br>
          <button class="submit"  @click.self="submit" >登录</button>
       <span>注意，请认真阅读协议条款，如果同意请勾选上面复选框。</span>
        </div>
    </fieldset>
</form>
   
   
  </div>
 
</template>
<script>
import axios from "axios";
import MyCat from "@/components/mine/MyCat";
import { Toast } from 'vant';




export default {
    data(){
        return {
          debounceTime:5,
          timer: null, 
    loading: false,
            phone:'',
            captcha:'',
            uuname:"",
            loginInfo:{
                LoginName:'code',
                openId:''
            },
        }
    },
   
    components:{MyCat},
  
    methods:{
      
        getCode(){
          axios.get("http://47.115.51.185:8081/captcha/sent?phone="+this.phone).then(res=>{
              // console.log(res);
          });
        },
        submit(){
           axios.get("http://47.115.51.185:8081/login/cellphone?phone="+this.phone+"&password="+this.captcha).then(res=>{
                // console.log(this.captcha);
                // console.log(res.data);
                this.loginInfo.openId=res.code
                this.cookie.setCookie(this.loginInfo,30);
                this.$router.back();
              
                console.log(document.cookie);  
                 if(res.status==400){
        
                  Toast.success('登录成功');
           
          }else{
 
return false
            
            
          }
                     
            })
        },
        goto(){
     Toast.success('登录成功');
     this.$router.push({path:'/video'});
              
        },
        off(){
         this.$router.push({path:'/Home'});
        }
    }
}
</script>
<style lang="less" scpoed>

*{ touch-action: none;}
.login {
  background: url("../assets/img/preview-1.jpg") no-repeat ;
  
 
  width: 100%;
 height: 100%;

  color: #fff;
  
}
h1 {
  padding: 3.171875rem 0 1.328125rem 0;
  font-size: 0.75rem;
  text-align: center;
  height: 0.75rem;
}
input[type="text"] { padding: 4px 6px; }
#login {
    margin: 10px auto 10px;
    text-align: left;
}
fieldset {
    width: 230px;
    margin: 20px auto;
    font-size: 12px;
    padding: 8px 24px;
     height: 260px;
    // margin:60px;
    // background: hsla(93,96%,62%,1.00);
    border: solid 27px red;
    /*设置边框图像*/
   
    border-image-source: url(../static/img/userform/border1.png); /*兼容标准用法*/
  
    border-image-repeat: round;
      
    border-image-slice: 10;
     
    border-image-outset: 50px;
}
legend { font-weight:bold; font-size:20px; margin-bottom:12px;}
label {
    width: 200px;
    height: 26px;
    line-height: 26px;
    text-indent: 6px;
    display: block;
    font-weight: bold;
}
#name, #password {
    border: 1px solid #ccc;
    width: 160px;
    height: 22px;
    margin-left: 6px;
    padding-left: 28px;
    line-height: 20px;
}
#name { background: url(../static/img/userform/name.gif) no-repeat 4px center; }
#password { background: url(../static/img/userform/password.gif) no-repeat 4px center; }
.button_div {
  input[type="checkbox"] ~ button {display:none; }
input[type="checkbox"] ~ span {display:inline; }

input[type="checkbox"]:checked ~ button {display:inline; }
input[type="checkbox"]:checked ~ span {display:none; }

    text-align: center;
    margin: 6px auto;
     .submit {
     
      text-align: center;
     
    margin: 2px;
    height: 34px;
    width: 80px;
    margin-right: 10px;
    border: none;
    background: #034a76;
  
    border-radius: 40px;
    
    box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255, 255, 255, 0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df;
    }
}


/*设计表单内文本框在被激活和获取焦点状态下时，轮廓线的宽、样式和颜色*/
input[type="text"]:focus { 
   padding: 4px;
    border: solid 1px #ddd;
    transition: background-color 1s ease-in;

   background-color: transparent;
  transform: scale(1.05) }
input[type="text"]:active  { outline: thick solid #aaa }
 input {
      // flex: 0 0 250px;
      width: 60%;
      // background-color: transparent;
      border: 1px solid grey;
      outline: none;
      border-radius: 15px;
      text-indent: 0.5em;
      font-size: .390625rem;
      color: wheat;
    }




</style>